<template>
  <view class="detail-wrap">
    <view class="content">
      <view class="image-gallery" v-if="record?.imgsList?.length > 0">
        <swiper class="swiper" indicator-dots autoplay :interval="3000" :circular="true">
          <swiper-item v-for="(img, index) in record.imgsList" :key="index">
            <view class="swiper_item" >
              <image :src="img.img_url" mode="aspectFill" class="record-image" @click="previewImage(index)" />
            </view>
          </swiper-item>
        </swiper>
      </view>
      <view class="record-info">
        <view class="record-title" v-if="record.title">{{ record.title }}</view>
        <view class="record-text">{{ record.text_container }}</view>
        <view class="record-time">{{ record.time }}</view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import { authRequest } from '@/utils/authRequest.js';

const record = ref({});

const getRecordDetail = async (id) => {
  try {
    const res = await authRequest('getRecordDetail', { _id: id });
    
    if (res.result.code === 200) {
      console.log(res.result.data.data[0]);
      record.value = res.result.data?.data[0]?.record;
      console.log(record.value, 'record.value');
    }
  } catch (error) {
    console.error('获取记录详情失败:', error);
    uni.showToast({ title: '获取记录详情失败', icon: 'none' });
  }
};

// 预览图片
const previewImage = (currentIndex) => {
  const urls = record.value.imgsList.map(img => img.img_url); // 获取所有图片的 URL
  uni.previewImage({
    current: urls[currentIndex], // 当前显示图片的链接
    urls: urls // 需要预览的图片链接列表
  });
};

onLoad((options) => {
  getRecordDetail(options.id);
});
</script>

<style lang="scss" scoped>
.detail-wrap {
  background-color: #fff;
  min-height: 100vh;
}

.content {
  padding: 0;
}

.record-info {
  padding: 0 20px;
}

.record-time {
  padding-top: 32rpx;
  text-align: right;
  font-size: 28rpx;
  color: #666;
}

.record-title {
  font-size: 32rpx;
  font-weight: bold;
  margin-top: 10rpx;
}

.record-text {
  font-size: 32rpx;
  color: #333;
  margin-top: 10rpx;
}

.image-gallery {
 
}

.swiper {
  height: 600rpx; /* 设置轮播图的高度 */
}

.swiper_item {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
}

.record-image {
  width: 100%;
  height: 100%;
}
</style>
